<!doctype html>
<html>

	<head>
		<meta charset="UTF-8">
		<title lang>订单管理-订单列表</title>
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<link href="../../../css/mui.min.css" rel="stylesheet" />
		<link rel="stylesheet" href="../../../css/style.css" />
		<link rel="stylesheet" href="../../../css/title.css" />
		
		<style>
			.mui-card .mui-control-content {
				padding: 10px;
			}
			.mui-control-content {
				height: 580px;
				margin-bottom:30px;
			}
			.mui-bar .mui-segmented-control{
				top: 0;
			}
			#mairu_list .mui-control-content ul li {
		    border: none;
		    width: 100%;
		    height: auto;
		    background: #fff;
		    margin-top: 10px;
		    }
		    #mairu_list .mui-control-content ul li.mui-table-view-cell{
			    padding: 0;
		    }
		    .mui-content {
			    margin: 10px 10px 0;
			}
			#segmentedControl{
				display: table;
			}
			.home_top #segmentedControl .mui-control-item{width:auto;padding:0 20px;}

			.mui-segmented-control{border-radius:30px;}
			.mui-pull-bottom-tips{
				color: white;
				text-align: center;
				line-height: 50px;
			}
			.goodsbox{
				width: 100%;
				height: auto;
			}
			.goods-top{
				padding: 5px 5px 0px 5px;
				border-bottom: 1px dashed #ccc;
				position: relative;
			}
			.goods-top-left{
				width: 30%;
				float: left;
			}
			.goods-top-left img{
				width: 100%;
			}
			.goods-top-right{
				width: 70%;
				float: left;
				padding-right: 20%;
				padding-left: 5px;
			}
			.goods-top-right h3{
				color: #000;
				font-size: 17px;
				font-weight: normal;
				font-family: "微软雅黑";
				margin: 0;
				margin-bottom: 5px;
				line-height: 23px;
			}
			.goods-triangle{
				height:0;
				width:0;
				position:absolute;/*根据情况自己搞*/
				right:2%;
				top:1px;
				border-left: 36px solid transparent;/*把左边和右边的边框设置为透明*/
  				border-top: 38px solid #05508a;/*上边的边框设置颜色*/
  				border-right: 38px solid transparent;
  			}
  			.goods-num{
  				position:absolute;
  				top:-35px;
  				color:#fff;
  				left:-8px;
  				font-size:16px;
  				font-weight:700;
  			}
  			.goods-money{
  				position: absolute;
  				bottom: 5px;
  				right: 10px;
  				color: rgb(240,90,35);
  			}
  			.goods-main{
  				width: 100%;
  				height: auto;
  				padding: 5px 5px;
  			}
  			.shop-goods{
				width: 100%;
				height: auto;
				padding-bottom: 10px;
  			}
			.shop-goods button{
				float: right;
				display: block;
				width: 110px;
				height: 30px;
				padding: 0px;
				margin: 0px;
				margin-right: 10px;
				border: none;
				border-radius: 15px;
				background: #05508a;
				color: #fff;
			}
			
			.goods-table{
  					width: 260px;
  					height: 140px;
  					background: rgba(0,0,0,0.7);
  					position: fixed;
  					left: 50%;
  					top: 50%;
  					margin-left: -130px;
  					margin-top: -70px;
  					z-index: 999;
  				}
  				.goods-table-input{
  					width: 100%;
  					height: 50px;
  					font-family: "微软雅黑";
  					
  				}
  				.goods-table-input span{
  					display: block;
  					width: 35%;
  					height: 50px;
  					line-height: 50px;
  					color: white;
  					float: left;
  					font-size: 14px;
  					text-align: right;
  					
  				}
  				.goods-table-input input{
  					display: block;
  					width: 65%;
  					font-size: 14px;
  					padding: 0 5px;
  					margin: 0;
  					background: none;
  					line-height: 50px;
  					color:#fff;
  				}
  				
  				.goods-table-input textarea{
  					display: block;
  					width: 98%;
  					font-size: 14px;
  					padding: 0 5px;
  					margin: 0;
  					background: none;
  					color:#fff;
  				}
  				
  				.goods-table-btn{
  					width: 100%;
  					height: 49px;
  					
  				}
  				.goods-table-btn a{
  					display: block;
  					width: 50%;
  					height: 40px;
  					float: left;
  					line-height: 40px;
  					text-align: center;
  					color: black;
  					font-size: 16px;
  					background: -webkit-linear-gradient(top,#fbed21,#fab538);
  				}
  				
  				.mui-icon-refresh-filled {
				    color: #ccc;
				}
				.home_top #segmentedControl .mui-active{
					background:#ccc;color:#05508a;
				}
				#mairu_list .mui-control-content .mui-table-view{
					background:#e3e3e3;
				}
				#mairu_list .mui-control-content ul li.mui-active{
					background:#ccc;
				}
		</style>
	</head>
	<body>
		<header class="mui-bar mui-bar-nav home_top">
			<a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left"></a>
			<div id="segmentedControl" class="mui-segmented-control">
				<a class="mui-control-item mui-active" href="#item1" lang>已发货</a>
				<a class="mui-control-item" href="#item2" lang>未发货</a>
			</div>
			<a class="mui-icon mui-icon-refresh-filled mui-pull-left" id="refresh"></a>
	    </header>
	    
	    <div class="goods-table" id="shipping_info" style="display:none;">
	    	<input type="hidden" name="order_id" id="order_id" value="" class=""  />
	    	<div class="goods-table-input" style="border-bottom: 1px dashed white;"><span lang>快递公司：</span><input type="text" id="shipping_name" placeholder="请输入快递公司名称" lang /></div>
	   		<div class="goods-table-input"><span lang>快递单号：</span><input type="text" id="invoice_no" placeholder="请输入快递单号" lang /></div>
	    	<div class="goods-table-btn"><a style="border-right: 1px solid rgb(51,51,51);" id="cancel">取消</a><a id="do_send" lang>确定</a></div>
	    </div>
	    
	    
	     <div class="goods-table" id="cancel_order_info" style="display:none;width:280px;height:260px;left: 50%;top:42%;">
	    	<input type="hidden" name="oid" id="oid" value="" class=""  />
	    	<div class="goods-table-input" style="border-bottom: 1px dashed white;height:220px;">
	    		<span style="width:38%;" lang>取消订单理由：</span>
	    		<textarea  id="remark" cols="8" rows="7" placeholder="请输入取消订单的理由，不少于5个字" lang ></textarea>
	    	</div>
	   		
	    	<div class="goods-table-btn"><a style="border-right: 1px solid rgb(51,51,51);" id="cancel_order">取消</a><a id="do_cancel_order" lang>确定</a></div>
	    </div>
	    
		<div class="mui-content">
			<div class="mui-slider-group" id="mairu_list">
			
				<div id="item1" class="mui-control-content mui-active">
					<div id="scroll" class="mui-scroll-wrapper">
					<div class="mui-scroll">
					<ul class="mui-table-view">
						<!--<li class="mui-table-view-cell">
							<div class="goodsbox">
								<div class="goods-top">
									<div class="goods-top-left">
										<img src="../../../img/shop.png">
									</div>
									<div class="goods-top-right">
										<h3>苹果iPhone7全网通4G手机中国红</h3>
										<p class='mui-ellipsis'>价格：3278</p>
										<p class='mui-ellipsis'>库存：3</p>
									</div>
									<div class="goods-triangle"><p class="goods-num">01</p></div>
									<div class="goods-money">合计：9999</div>
									<div style="clear: both;"></div>
								</div>
								<div class="goods-main">
									<p>订单编号：2018062901</p>
									<p>姓名：张三</p>
									<p>联系电话：2018062901</p>
									<p>收货地址：2018062901</p>
									<p>备注信息：2018062901</p>
								</div>
								<div class="shop-goods"><button>发货</button><div style="clear: both;"></div></div>
							</div>
							<span class="mui-pull-right" id="confirm" style="display: none;"></span>
						</li>
						<li class="mui-table-view-cell">
							<div class="goodsbox">
								<div class="goods-top">
									<div class="goods-top-left">
										<img src="../../../img/shop.png">
									</div>
									<div class="goods-top-right">
										<h3>苹果iPhone7全网通4G手机中国红</h3>
										<p class='mui-ellipsis'>价格：3278</p>
										<p class='mui-ellipsis'>库存：3</p>
									</div>
									<div class="goods-triangle"><p class="goods-num">01</p></div>
									<div class="goods-money">合计：9999</div>
									<div style="clear: both;"></div>
								</div>
								<div class="goods-main">
									<p>订单编号：2018062901</p>
									<p>姓名：张三</p>
									<p>联系电话：2018062901</p>
									<p>收货地址：2018062901</p>
									<p>备注信息：2018062901</p>
								</div>
								<div class="shop-goods"><button>发货</button><div style="clear: both;"></div></div>
							</div>
								<span class="mui-pull-right" id="confirm" style="display: none;"></span>
						</li>-->
					</ul>
				</div>
				</div>
				</div>
				
				<div id="item2" class="mui-control-content">
					<div class="mui-scroll-wrapper">
					<div class="mui-scroll">
					<ul class="mui-table-view">
						<!--<li class="mui-table-view-cell">
							<div class="goodsbox">
								<div class="goods-top">
									<div class="goods-top-left">
										<img src="../../../img/shop.png">
									</div>
									<div class="goods-top-right">
										<h3>苹果iPhone7全网通4G手机中国红</h3>
										<p class='mui-ellipsis'>价格：3278</p>
										<p class='mui-ellipsis'>库存：3</p>
									</div>
									<div class="goods-triangle"><p class="goods-num">01</p></div>
									<div class="goods-money">合计：9999</div>
									<div style="clear: both;"></div>
								</div>
								<div class="goods-main">
									<p>订单编号：2018062901</p>
									<p>姓名：张三</p>
									<p>联系电话：2018062901</p>
									<p>收货地址：2018062901</p>
									<p>备注信息：2018062901</p>
								</div>
							</div>
								<span class="button mui-pull-right" id="cancel" style="display: none;"></span>
						</li>-->
					</ul>
				</div>
			    </div>
				</div>
				
				
				
			</div>
		</div>
		
		<script src="../../../js/mui.js"></script>
		<script src="../../../js/config.js"></script>
		<script src="../../../js/common.js"></script>
		<script src="../../../js/sockjs.js"></script>
		<script src="../../../js/mui.pullToRefresh.js"></script>
		<script src="../../../js/mui.pullToRefresh.material.js"></script>
		<script src="../../../js/jquery-1.7.2.min.js"></script>
		<script src="../../../resource/store/shop_order.js"></script>
    	<script src="../../../lang/shop.js"></script>
			
	</body>
	
</html>